<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义布局</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .c2 {
            border: 1px solid black;
            background-color: green;


        }

        .c4 {
            border: 1px solid black;
            background-color: blue;

        }

        .c5 {
            border: 1px solid black;

            background-color: pink;
        }

        .c1 {
            border: 1px solid black;
            background-color: orange;
        }

        .container {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-2 c2 ">green-pink</div>
            <div class="col-lg-4 c4 ">blue-green</div>
            <div class="col-lg-5 c5 ">pink-orange</div>
            <div class="col-lg-1 c1 ">or-blue</div>
        </div>
        <div class="row">
            <div class="col-lg-2 c2 ">green-pink</div>
            <div class="col-lg-4 c4 ">blue-green</div>
            <div class="col-lg-5 c5 ">pink-orange</div>
            <div class="col-lg-1 c1 ">or-blue</div>
        </div>

        <div class="row">
            <!-- 位置互换 -->
            <div class="col-md-9 col-md-push-3 c1">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9 c2">.col-md-3 .col-md-pull-9</div>


            <div class="col-md-4 col-md-offset-12 c2">.col-md-3 .col-md-pull-9</div>
        </div>

        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>

        <table class="table">
            <!-- On rows -->
            <!-- <tr class="active">...</tr>
            <tr class="success">...</tr>
            <tr class="warning">...</tr>
            <tr class="danger">...</tr>
            <tr class="info">...</tr> -->
            
            <!-- On cells (`td` or `th`) -->
            <tr>
                <td class="active">...</td>
                <td class="success">...</td>
                <td class="warning">...</td>
                <td class="danger">...</td>
                <td class="info">...</td>
            </tr>
        </table>
    </div>

    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess2">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning2">Input with warning</label>
        <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
        <span id="inputWarning2Status" class="sr-only">(warning)</span>
    </div>
    <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError2">Input with error</label>
        <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
        <span id="inputError2Status" class="sr-only">(error)</span>
    </div>
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
        </div>
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
    </div>

    <div class="row">
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-2">
        </div>
        <div class="col-xs-5">
            <input type="text" class="form-control" placeholder=".col-xs-3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
        </div>
    </div>

    <a class="btn btn-default" href="#" ">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">


    <div class="alert alert-danger" role="alert">
        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
        <span class="sr-only">Error:</span>
        Enter a valid email address
    </div>


    <!-- Split button -->
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>

</html>